<template>
    <div class="videoDiv animate__animated animate__zoomIn" ref="videoRef" @mouseover="mouseoverblock"
        @mouseout="mouseoutnone">
        <span ref="spanRef">{{ props.textData.videoView }}</span>
        <!-- 关闭 -->
        <i @click="close"></i>
        <!-- 方向 -->
        <div class="direction" ref="directionRef">
            <span @mousedown="zuoshang" @mouseup="zuoshang1"></span>
            <span @mousedown="shang" @mouseup="shang1"></span>
            <span @mousedown="youshang" @mouseup="youshang1"></span>
            <span @mousedown="zuo" @mouseup="zuo1"></span>
            <span @mousedown="zanting" @mouseup="zanting1" @wheel="fangdaxiao"></span>
            <span @mousedown="you" @mouseup="you1"></span>
            <span @mousedown="zuoxia" @mouseup="zuoxia1"></span>
            <span @mousedown="xia" @mouseup="xia1"></span>
            <span @mousedown="youxia" @mouseup="youxia1"></span>
        </div>
        <!-- <video id="webrtc" ref="webrtc" ></video> -->
        <video id="webrtc" ref="webrtc" autoplay>
            <!-- <source src="" type="application/x-mpegURL" /> -->
        </video>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
let videoRef = ref()
let spanRef = ref()
let webrtc = ref()
let cloceNum = ref()//控制第几个视频
let directionRef = ref()
const props = defineProps(["isShow", 'textData']);
const emits = defineEmits(['videoView'])
import hlsjs from "hls.js";
import http from "axios"
const mouseoverblock = () => {
    directionRef.value.style.display = 'block'
}
const mouseoutnone = () => {
    directionRef.value.style.display = 'none'
}
const close = () => {
    // console.log(props, 8);
    emits('videoView', { tag: false, text: 'no' })
    videoRef.value.className = "videoDiv animate__animated animate__zoomOut"
    if (cloceNum.value == 0) {
        closePlay('34020000001321000014', '34020000001321000014')
    } else if (cloceNum.value == 1) {
        closePlay('34020000001321000013', '34020000001321000013')
    } else if (cloceNum.value == 2) {
        closePlay('34020000001321000016', '34020000001321000016')
    } else if (cloceNum.value == 3) {
        closePlay('34020000001321000011', '34020000001321000011')
    } else if (cloceNum.value == 4) {
        closePlay('34020000001321000018', '34020000001321000018')
    } else if (cloceNum.value == 5) {
        closePlay('34020000001321000015', '34020000001321000015')
    } else if (cloceNum.value == 6) {
        closePlay('34020000001321000012', '34020000001321000012')
    } else if (cloceNum.value == 7) {
        closePlay('34020000001321000010', '34020000001321000010')
    } else if (cloceNum.value == 8) {
        closePlay('34020000001321000017', '34020000001321000017')
    }
}

// 点击细节联动请求对应的视频流
const axiosPlay = (e: any) => {
    console.log(e, 3);//表示第几个
    //登录和播放视频流
    if (e == 0) {
        // 北停车场
        login('34020000001321000014', '34020000001321000014')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/btcc3/webrtc')
        cloceNum.value = 0
    } else if (e == 1) {
        // 滨湖大道桥
        login('34020000001321000013', '34020000001321000013')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhddq3/webrtc')
        cloceNum.value = 1
    } else if (e == 2) {
        // 中
        login('34020000001321000016', '34020000001321000016')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhddz2/webrtc')
        cloceNum.value = 2
    } else if (e == 3) {
        login('34020000001321000011', '34020000001321000011')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhl2/webrtc')
        cloceNum.value = 3
    } else if (e == 4) {
        login('34020000001321000018', '34020000001321000018')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhlk1/webrtc')
        cloceNum.value = 4
    } else if (e == 5) {
        login('34020000001321000015', '34020000001321000015')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/tsg1/webrtc')
        cloceNum.value = 5
    } else if (e == 6) {
        login('34020000001321000012', '34020000001321000012')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/xbtcc2/webrtc')
        cloceNum.value = 6
    } else if (e == 7) {
        login('34020000001321000010', '34020000001321000010')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/xhlz3/webrtc')
        cloceNum.value = 7
    } else if (e == 8) {
        login('34020000001321000017', '34020000001321000017')
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/ztnln1/webrtc')
        cloceNum.value = 8
    }

}
// 带预置位的点播
const axiosPlay1 = (e: any, num: any) => {
    console.log(e, num, 6789);//表示第几个
    //登录和播放视频流
    if (e == 0) {
        // 北停车场
        login1('34020000001321000014', '34020000001321000014', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/btcc3/webrtc')
        cloceNum.value = 0
    }
    else if (e == 1) {
        // 滨湖大道桥
        login1('34020000001321000013', '34020000001321000013', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhddq3/webrtc')
        cloceNum.value = 1
    } else if (e == 2) {
        // 中
        login1('34020000001321000016', '34020000001321000016', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhddz2/webrtc')
        cloceNum.value = 2
    } else if (e == 3) {
        login1('34020000001321000011', '34020000001321000011', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhl2/webrtc')
        cloceNum.value = 3
    } else if (e == 4) {
        login1('34020000001321000018', '34020000001321000018', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/bhlk1/webrtc')
        cloceNum.value = 4
    } else if (e == 5) {
        login1('34020000001321000015', '34020000001321000015', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/tsg1/webrtc')
        cloceNum.value = 5
    } else if (e == 6) {
        login1('34020000001321000012', '34020000001321000012', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/xbtcc2/webrtc')
        cloceNum.value = 6
    } else if (e == 7) {
        login1('34020000001321000010', '34020000001321000010', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/xhlz3/webrtc')
        cloceNum.value = 7
    } else if (e == 8) {
        login1('34020000001321000017', '34020000001321000017', num)
        rtcVideo(webrtc.value, 'http://10.189.2.94:8510/stream/beilu1/channel/ztnln1/webrtc')
        cloceNum.value = 8
    }

}
onMounted(() => {
    var scrollingTimer;
    window.addEventListener('wheel', function (event) {
        clearTimeout(scrollingTimer);
        scrollingTimer = setTimeout(function () {
            if (cloceNum.value == 0) {
                ajax('34020000001321000014', '34020000001321000014', 'stop')
            } else if (cloceNum.value == 1) {
                ajax('34020000001321000013', '34020000001321000013', 'stop')
            } else if (cloceNum.value == 2) {
                ajax('34020000001321000016', '34020000001321000016', 'stop')
            } else if (cloceNum.value == 3) {
                ajax('34020000001321000011', '34020000001321000011', 'stop')
            } else if (cloceNum.value == 4) {
                ajax('34020000001321000018', '34020000001321000018', 'stop')
            } else if (cloceNum.value == 5) {
                ajax('34020000001321000015', '34020000001321000015', 'stop')
            } else if (cloceNum.value == 6) {
                ajax('34020000001321000012', '34020000001321000012', 'stop')
            } else if (cloceNum.value == 7) {
                ajax('34020000001321000010', '34020000001321000010', 'stop')
            } else if (cloceNum.value == 8) {
                ajax('34020000001321000017', '34020000001321000017', 'stop')
            }
        }, 1000);
    });
})
const rtcVideo = (vdo: any, url: any) => {
    let webrtc: any, webrtcSendChannel: any;
    startPlay();
    function startPlay() {
        webrtc = new RTCPeerConnection({
            sdpSemantics: "unified-plan"
        });
        webrtc.onnegotiationneeded = handleNegotiationNeeded;
        webrtc.ontrack = function (event) {
            vdo.srcObject = event.streams[0];
            vdo.play();
            //webrtc.getReceivers()[0].playoutDelayHint = 0;// 0.2s延迟
        }
        webrtc.addTransceiver('video', {
            'direction': 'sendrecv'
        });
        webrtcSendChannel = webrtc.createDataChannel('foo');

        webrtcSendChannel.onclose = () => {
            startPlay();
            console.log('[onclose] ' + url);
        }
        webrtcSendChannel.onopen = () => {
            webrtcSendChannel.send('ping');
            let webrtcSendChannelInterval = setInterval(() => {
                webrtcSendChannel.send('ping');
            }, 1000)
            console.log('[onopen] ' + url + '  延迟(ms):' + webrtcSendChannelInterval);
        }

        webrtcSendChannel.onmessage = e => console.log(e.data);

    }
    async function handleNegotiationNeeded() {
        let offer = await webrtc.createOffer();

        await webrtc.setLocalDescription(offer);
        $.post(url, {
            data: btoa(webrtc.localDescription.sdp)
        }, function (data) {
            try {
                webrtc.setRemoteDescription(new RTCSessionDescription({
                    type: 'answer',
                    sdp: atob(data)
                }))
            } catch (e) {
                console.warn(e);
            }
        });
    }

    vdo.addEventListener('loadeddata', () => {
        vdo.play();
    });

    vdo.addEventListener('error', () => {
        console.log('video1 err.')
    });

}
// 登录和点播
let login = (deviceId: any, channelId: any) => {
    //先登录
    http({
        method: "get",
        url: "/api/user/login",
        params: {
            username: "admin",
            password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        },
        baseURL: "/api",
    })
        .then((response) => {
            if (response.status >= 200 || response.status < 400) {
                console.log("登录成功", response);
                // HistoricalLogin.value = true;
            } else {
                // HistoricalLogin.value = false;
                console.log("链接失败", response);
            }
        })
        .catch((error) => {
            console.log("登录失败", error);
        });
    // 再点播
    setTimeout(() => {
        http({
            method: "get",
            url: `/api/play/start/${deviceId}/${channelId}`,
            // params: {
            //     command: command || "stop",
            //     horizonSpeed: 75,
            //     verticalSpeed: 75,
            //     zoomSpeed: 75,
            // },
            baseURL: "/api",
        })
            .then((response) => {
                // if (response.status >= 200 || response.status < 400) {
                console.log("点播成功", response);
                // let flvCfg1 = response.data.data.hls;//获取到接口中视频流地址m3u8
                // let videoFlvCfg1 = document.getElementById("webrtc");//获取到video标签（id）
                // var hls = new hlsjs();
                // hls.loadSource(flvCfg1);//视频流交给hls
                // hls.attachMedia(videoFlvCfg1);//把hls赋给了video标签
                // //播放视频
                // hls.on(hls.Events, function () {
                //     videoFlvCfg1.play();
                // })

            })
            .catch((error) => {
                console.log("点播失败", error);
            });
    }, 100)
}// 登录和预置位
let login1 = (deviceId: any, channelId: any, parameter2: any) => {
    //先登录
    http({
        method: "get",
        url: "/api/user/login",
        params: {
            username: "admin",
            password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        },
        baseURL: "/api",
    })
        .then((response) => {
            if (response.status >= 200 || response.status < 400) {
                console.log("登录成功", response);
                // HistoricalLogin.value = true;
            } else {
                // HistoricalLogin.value = false;
                console.log("链接失败", response);
            }
        })
        .catch((error) => {
            console.log("登录失败", error);
        });
    // 修改预置位
    setTimeout(() => {
        http({
            method: "post",
            url: `/api/ptz/front_end_command/${deviceId}/${channelId}`,
            params: {
                cmdCode: 130,//死的
                parameter1: 0,//死的
                parameter2: parameter2,//预置位编号201-224
                combindCode2: 0//死的
            },
            baseURL: "/api",
        })
            .then((response) => {
                // if (response.status >= 200 || response.status < 400) {
                console.log("点播成功", response);
                // let flvCfg1 = response.data.data.hls;//获取到接口中视频流地址m3u8
                // let videoFlvCfg1 = document.getElementById("webrtc");//获取到video标签（id）
                // var hls = new hlsjs();
                // hls.loadSource(flvCfg1);//视频流交给hls
                // hls.attachMedia(videoFlvCfg1);//把hls赋给了video标签
                // //播放视频
                // hls.on(hls.Events, function () {
                //     videoFlvCfg1.play();
                // })

            })
            .catch((error) => {
                console.log("点播失败", error);
            });
    }, 100)
}
// 关闭点播
let closePlay = (deviceId: any, channelId: any,) => {
    http({
        method: "get",
        url: `/api/play/stop/${deviceId}/${channelId}`,
        // params: {
        //     command: command || "stop",
        //     horizonSpeed: 75,
        //     verticalSpeed: 75,
        //     zoomSpeed: 75,
        // },
        baseURL: "/api",
    })
        .then((response) => {
            // if (response.status >= 200 || response.status < 400) {
            console.log("关闭点播成功", response);
        })
        .catch((error) => {
            console.log("关闭点播失败", error);
        });
}
// 联动
let ajax = (deviceId: any, channelId: any, command: any) => {
    // 细节联动
    http({
        //  /api/ptz/control/{deviceId}/{channelId}
        method: "post",
        url: `/api/ptz/control/${deviceId}/${channelId}`,
        params: {
            command: command || "stop",
            horizonSpeed: 70,
            verticalSpeed: 70,
            zoomSpeed: 70,
        },
        baseURL: "/api",
    })
        .then((response) => {
            // if (response.status >= 200 || response.status < 400) {
            console.log(command, "ok", response);
            // HistoricalLogin.value = true;
            // } else {
            // HistoricalLogin.value = false;
            // console.log(command, "no", response);
            // }
        })
        .catch((error) => {
            console.log("旋转失败", error);
        });
};
// 上下左右
let zuoshang = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'upleft')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'upleft')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'upleft')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'upleft')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'upleft')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'upleft')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'upleft')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'upleft')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'upleft')
    }
}
let zuoshang1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
let shang = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'up')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'up')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'up')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'up')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'up')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'up')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'up')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'up')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'up')
    }

}
let shang1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
let youshang = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'upright')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'upright')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'upright')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'upright')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'upright')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'upright')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'upright')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'upright')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'upright')
    }

}
let youshang1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }

}
let zuo = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'left')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'left')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'left')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'left')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'left')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'left')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'left')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'left')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'left')
    }

}
let zuo1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
let zanting = () => {
    // 暂时不写这个
}
let zanting1 = () => {
    // 暂时不写这个
}
let fangdaxiao = (e: any) => {
    e.preventDefault();
    if (e.deltaY < 0) {
        if (cloceNum.value == 0) {
            ajax('34020000001321000014', '34020000001321000014', 'zoomin')
        } else if (cloceNum.value == 1) {
            ajax('34020000001321000013', '34020000001321000013', 'zoomin')
        } else if (cloceNum.value == 2) {
            ajax('34020000001321000016', '34020000001321000016', 'zoomin')
        } else if (cloceNum.value == 3) {
            ajax('34020000001321000011', '34020000001321000011', 'zoomin')
        } else if (cloceNum.value == 4) {
            ajax('34020000001321000018', '34020000001321000018', 'zoomin')
        } else if (cloceNum.value == 5) {
            ajax('34020000001321000015', '34020000001321000015', 'zoomin')
        } else if (cloceNum.value == 6) {
            ajax('34020000001321000012', '34020000001321000012', 'zoomin')
        } else if (cloceNum.value == 7) {
            ajax('34020000001321000010', '34020000001321000010', 'zoomin')
        } else if (cloceNum.value == 8) {
            ajax('34020000001321000017', '34020000001321000017', 'zoomin')
        }
    } else {
        if (cloceNum.value == 0) {
            ajax('34020000001321000014', '34020000001321000014', 'zoomout')
        } else if (cloceNum.value == 1) {
            ajax('34020000001321000013', '34020000001321000013', 'zoomout')
        } else if (cloceNum.value == 2) {
            ajax('34020000001321000016', '34020000001321000016', 'zoomout')
        } else if (cloceNum.value == 3) {
            ajax('34020000001321000011', '34020000001321000011', 'zoomout')
        } else if (cloceNum.value == 4) {
            ajax('34020000001321000018', '34020000001321000018', 'zoomout')
        } else if (cloceNum.value == 5) {
            ajax('34020000001321000015', '34020000001321000015', 'zoomout')
        } else if (cloceNum.value == 6) {
            ajax('34020000001321000012', '34020000001321000012', 'zoomout')
        } else if (cloceNum.value == 7) {
            ajax('34020000001321000010', '34020000001321000010', 'zoomout')
        } else if (cloceNum.value == 8) {
            ajax('34020000001321000017', '34020000001321000017', 'zoomout')
        }
    }
}
let you = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'right')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'right')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'right')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'right')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'right')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'right')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'right')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'right')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'right')
    }
}
let you1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
let zuoxia = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'downleft')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'downleft')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'downleft')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'downleft')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'downleft')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'downleft')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'downleft')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'downleft')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'downleft')
    }
}
let zuoxia1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
let xia = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'down')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'down')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'down')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'down')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'down')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'down')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'down')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'down')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'down')
    }
}
let xia1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
let youxia = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'downright')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'downright')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'downright')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'downright')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'downright')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'downright')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'downright')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'downright')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'downright')
    }
}
let youxia1 = () => {
    if (cloceNum.value == 0) {
        ajax('34020000001321000014', '34020000001321000014', 'stop')
    } else if (cloceNum.value == 1) {
        ajax('34020000001321000013', '34020000001321000013', 'stop')
    } else if (cloceNum.value == 2) {
        ajax('34020000001321000016', '34020000001321000016', 'stop')
    } else if (cloceNum.value == 3) {
        ajax('34020000001321000011', '34020000001321000011', 'stop')
    } else if (cloceNum.value == 4) {
        ajax('34020000001321000018', '34020000001321000018', 'stop')
    } else if (cloceNum.value == 5) {
        ajax('34020000001321000015', '34020000001321000015', 'stop')
    } else if (cloceNum.value == 6) {
        ajax('34020000001321000012', '34020000001321000012', 'stop')
    } else if (cloceNum.value == 7) {
        ajax('34020000001321000010', '34020000001321000010', 'stop')
    } else if (cloceNum.value == 8) {
        ajax('34020000001321000017', '34020000001321000017', 'stop')
    }
}
defineExpose({
    axiosPlay, axiosPlay1
})
</script>
<style scoped>
.videoDiv {
    width: 100%;
    height: 102%;
}

video {
    width: 98%;
    margin-left: .1rem;
    height: 89%;
}

/* video { */
/* margin-top: 0.5%; */
/* margin: 0 .225rem; */
/* } */

.videoDiv {
    position: relative;
    background-image: url("../assets/img/border_1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.videoDiv>span {
    /* position: absolute; */
    display: block;
    width: 100%;
    height: 11%;
    line-height: .9rem;
    font-size: .25rem;
    padding-left: .1875rem;
    /* background-color: red; */
    color: #fff;
    cursor: move;
}

.direction {
    position: absolute;
    width: 2.7rem;
    height: 2.7rem;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    display: none;
}

.direction span:nth-child(1) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/zuoshang.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(2) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/shang.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(3) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/youshang.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(4) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/zuo.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(5) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    /* background-image: url("../assets/img/jian/zanting.png"); */
    /* background-repeat: no-repeat; */
    /* background-size: .88rem .88rem; */
}

.direction span:nth-child(6) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/you.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(7) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/zuoxia.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(8) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/xia.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.direction span:nth-child(9) {
    display: inline-block;
    width: .88rem;
    height: .88rem;
    background-image: url("../assets/img/jian/youxia.png");
    background-repeat: no-repeat;
    background-size: .88rem .88rem;
}

.videoDiv i {
    position: absolute;
    cursor: pointer;
    top: .3rem;
    right: .2rem;
    width: .35rem;
    height: .35rem;
    background-image: url("../assets/img/close.png");
    background-repeat: no-repeat;
    background-size: .35rem .35rem;
    z-index: 1;
}
</style>